<template>
    <div class="mainDiv">


        <div style="display: flex;flex-shrink: 0;margin-bottom: 10px">
          <div style="width:25%;margin-right: 10px">
            <div class="settlementXianjin">
              <h3 class="xianjinH3">今日收入 <span class="h3span">￥{{inOutData.allIn}}</span></h3>
              <div class="settlementRowDiv">
                <p v-for="(item, key) in inOutData.inList" class="settlementRowP">
                  {{item.ordertype|orderName}} 
                  <span class="h3span">￥{{item.money|abs}}</span>
                </p>
              </div>
            </div>
          </div>
          <div style="width:25%;margin-right: 10px">
            <div class="settlementXianjin">
              <h3 class="xianjinH3">今日支出 <span class="h3span">￥{{inOutData.allOut}}</span></h3>

              <div class="settlementRowDiv">
                <p v-for="(item, key) in inOutData.outList" class="settlementRowP">
                  {{item.ordertype|orderName}} 
                  <span class="h3span">￥{{item.money|abs}}</span>
                </p>
              </div>
            </div>
          </div>


          <div style="width:25%;margin-right: 10px">
            <div class="settlementYeji">
              <h3 class="xianjinH3">今日业绩 <span class="h3span">￥{{yejiTcheng.allyj}}</span></h3>
              <div class="settlementRowDiv">
                <p class="settlementRowP">现金业绩 <span class="h3span">￥{{yejiTcheng.allxy}}</span></p>
                <p class="settlementRowP">卡耗业绩 <span class="h3span">￥{{yejiTcheng.allky}}</span></p>
              </div>
            </div>
          </div>
          <div style="width:25%">
            <div class="settlementYeji">
              <h3 class="xianjinH3">今日提成 <span class="h3span">￥{{yejiTcheng.alltc}}</span></h3>
              <div class="settlementRowDiv">
                <p class="settlementRowP">现金提成 <span class="h3span">￥{{yejiTcheng.allxt}}</span></p>
                <p class="settlementRowP">卡耗提成 <span class="h3span">￥{{yejiTcheng.allkt}}</span></p>
                <p class="settlementRowP">手工提成 <span class="h3span">￥{{yejiTcheng.allst}}</span></p>
                <p class="settlementRowP">其他提成 <span class="h3span">￥{{yejiTcheng.allqt}}</span></p>
                <p class="settlementRowP">现金阶梯 <span class="h3span">￥{{yejiTcheng.allxj}}</span></p>
                <p class="settlementRowP">卡耗阶梯 <span class="h3span">￥{{yejiTcheng.allkj}}</span></p>
              </div>
            </div>
          </div>
        </div>



        <div class="rowHead" style="display: flex;height: 100%">
            <div id="mainas" style="width: 50%;height:100%;"></div>
            <div id="main" style="width: 50%;height:100%;"></div>
        </div>
        <div class="rowHead" style="display: flex;height: 100%">
            <div id="lastMonth" style="width: 50%;height:100%;"></div>
            <div id="nowMonth" style="width: 50%;height:100%;"></div>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'
import eCharts from 'echarts'
import Settlement from '@/service/shop/settlement.js'
export default {
  name: 'mains',
  data () {
    return {
      inOutData: {},
      yejiTcheng: {},
      guestBalData: {},
      guestData: {}
    }
  },
  methods: {
    close () {
      C.closeBrowserWindow()
    },
    async getDatas () {
      return await C.ajax('/shop/shopchart/getchartinfo', {}, 'post')
    },
    sevenDays (data) {
      var csdata = []
      var md = 0,
        nd = new Date()
      for (var i = 0; i < data.length; i++) {
        md = new Date(data[i].addtime * 1000)
        csdata.push({
          'x': (md.getMonth() + 1) + '月' + md.getDate(),
          'y': data[i].money
        })
      }

      var t = []
      for (var k = 6; k >= 0; k--) {
        var R = nd.getTime() - 1000 * 3600 * 24 * k
        var M = new Date(R).getMonth() + 1
        var D = new Date(R).getDate()
        t.push({
          'x': M + '月' + D,
          'y': 0
        })
      }

      for (var s = 0; s < t.length; s++) {
        for (var j = 0, length2 = csdata.length; j < length2; j++) {
          if (t[s].x == csdata[j].x) {
            t[s].y += csdata[j].y
          }
        }
      }

      return t
    },
    tongji (d, m, x) {
      var dt = { value: 0, name: '' }
      for (var i = 0; i < d.length; i++) {
        dt.value += d[i][m]
      }
      dt.value = Number(dt.value).toFixed(2)
      dt.name = x
      return dt
    },
    cartgoryType (data) {
      var cartgory = []
      cartgory.push(this.tongji(data.cardinfo, 'recemoney', '开卡'))
      cartgory.push(this.tongji(data.orderinfo, 'recemoney', '开单'))
      cartgory.push(this.tongji(data.rechargeinfo, 'recemoney', '充值'))
      return cartgory
    },
    cakeData (data, type) {
      var tm = new Date()

      // 本月日期的时间戳，从本月1号开始
      var thisDateYear = tm.getFullYear()
      var thisDateMoon = tm.getMonth() + 1
      var thisDateTime = Math.round(new Date(thisDateYear + '-' + thisDateMoon + '-01') / 1000)
      var lastDateTime = Math.round(new Date(thisDateYear + '-' + (thisDateMoon - 1) + '-01') / 1000)

      // 上月
      var lastMoon = { c: [], o: [], r: [] }
      // 本月
      var thisMoon = { c: [], o: [], r: [] }

      if (data.cinfo.length) this.fenMoon(data.cinfo, 'c', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)
      if (data.oinfo.length) this.fenMoon(data.oinfo, 'o', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)
      if (data.rinfo.length) this.fenMoon(data.rinfo, 'r', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)

      // 本月饼状图
      var mon = { c: 0, o: 0, r: 0 }
      if (type) this.tMon(thisMoon, mon)
      else this.tMon(lastMoon, mon)

      var cakeMoney = [
        { value: mon.c.toFixed(2) || 0, name: '开卡' },
        { value: mon.o.toFixed(2) || 0, name: '开单' },
        { value: mon.r.toFixed(2) || 0, name: '充值' }
      ]

      return cakeMoney
    },
    fenMoon (shuju, cun, money, thisDateTime, lastDateTime, thisMoon, lastMoon) {
      for (var i = 0; i < shuju.length; i++) {
        if (shuju[i].addtime >= thisDateTime) {
          thisMoon[cun].push(shuju[i][money])
        } else if (shuju[i].addtime >= lastDateTime && shuju[i].addtime < thisDateTime) {
          lastMoon[cun].push(shuju[i][money])
        }
      }
    },
    tMon (tM, mon) {
      for (var i in tM) {
        switch (i) {
          case 'c':
            tM[i].forEach(function (val, index) {
              mon.c += (0 | val)
            })
            break
          case 'o':
            tM[i].forEach(function (val, index) {
              mon.o += (0 | val)
            })
            break
          case 'r':
            tM[i].forEach(function (val, index) {
              mon.r += (0 | val)
            })
            break
        }
      }
    },
    async getMsg (betweenTime) {
      let data = await Settlement.getPayInOut(betweenTime)
      this.inOutData = data
      let ytdata = await Settlement.getYejiTicheng(betweenTime)
      this.yejiTcheng = ytdata
      let gdata = await Settlement.getGuestxiaofei(betweenTime)
      this.guestBalData = gdata
      let xdata = await Settlement.getGuestOrderXiaofei(betweenTime)
      this.guestData = xdata
    }
  },
  mounted: async function () {
    let data = await this.getDatas()

    let sevenDataX = [],
      sevenDataY = []

    this.sevenDays(data.cashinfo).forEach(row => {
      sevenDataX.push(row.x)
      sevenDataY.push(row.y)
    })

    let laiYuan = {
      cardinfo: data.cardinfo,
      orderinfo: data.orderinfo,
      rechargeinfo: data.rechargeinfo
    }

    let data2 = {
      cinfo: data.cinfo,
      oinfo: data.oinfo,
      rinfo: data.rinfo
    }

    eCharts.init(document.getElementById('main')).setOption({
      title: {
        text: '近7日现金来源统计图（现金单位：元）',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['开卡', '开单', '充值']
      },
      series: [{
        name: '现金来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.cartgoryType(laiYuan),
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    })

    eCharts.init(document.getElementById('nowMonth')).setOption({
      title: {
        text: '本月现金来源统计图（现金单位：元）',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['开卡', '开单', '充值']
      },
      series: [{
        name: '现金来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.cakeData(data2, true),
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    })

    eCharts.init(document.getElementById('lastMonth')).setOption({
      title: {
        text: '上月现金来源统计图（现金单位：元）',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['开卡', '开单', '充值']
      },
      series: [{
        name: '现金来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.cakeData(data2, false),
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    })

    eCharts.init(document.getElementById('mainas')).setOption({
      title: {
        text: '近7日现金收益趋势图（现金单位：元）',
        left: '50%',
        textAlign: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#ddd'
          }
        },
        backgroundColor: 'rgba(255,255,255,1)',
        padding: [5, 10],
        textStyle: {
          color: '#7588E4'
        },
        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
      },
      xAxis: {
        type: 'category',
        data: sevenDataX,
        boundaryGap: false,
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: ['#D4DFF5']
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#609ee9'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: ['#D4DFF5']
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#609ee9'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14
          }
        }
      },
      series: [{
        name: '收入',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: sevenDataY,
        areaStyle: {
          normal: {
            color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(216, 244, 247,1)'
            }, {
              offset: 1,
              color: 'rgba(216, 244, 247,1)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: '#58c8da'
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      }]
    })

    let begintime = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000)
    let endtime = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000) + 86400

    this.getMsg({
      begintime: begintime,
      endtime: endtime
    })
  }
}
</script>
<style scoped>
.settlementIndex{
    display:flex;
    flex-direction: column;
  }
  .settlementIndexDiv {
    display:flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .breadcrumb{
    padding: 0px 0px 10px 0px
  }
  .settlementRow{
    margin-bottom: 10px
  }
  .settlementXianjin{
    background-color: rgb(75, 139, 142);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
    height: 115px;
  }
  .settlementYeji{
    background-color: rgb(102, 162, 193);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
    height: 115px;
  }
  .xianjinH3{
    margin-bottom: 10px
  }
  .h3span{
    float: right
  }
  .settlementRowDiv {
    border-top:1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    padding: 10px 0px 0px 0px;
    overflow: auto;
  }
  .settlementRowP{
    padding:0px;
    margin:2px;
    font-size: 14px
  }
  .guestList{
    background-color: rgb(152, 184, 193);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
  }
  .guestDiv{
    border-top:1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 0px 0px 0px;
    height:220px;
    overflow:auto
  }
  .guestChildDiv{
    padding:0px;
    margin:2px;
    font-size: 14px;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .guestHeadDiv{
    display: flex;
    align-items: center;
  }
  .headSpan{
    padding-left: 5px;
  }
  .moneySpan{
    margin-right: 5px;
  }
</style>